<template>
	<m-layout2 class="withdraw_box" title="提现" :isBgUnset="false" barBg="rgba(255, 255, 255, 0)" color="#fff" gap="150 24 24">
		<view slot="right"><text @click="Jump('/pages/wallet/payouts/recode/recode')">提現記錄</text></view>
		<m-block gap="30" class="block">
			<template v-if="!backinfo.idcard">
				<view class="title flex-between" @click="Jump('/pages/mine/paymentWay/paymentWay?id=1')">
					<text>綁定收款方式</text>
					<uni-icons type="plusempty"></uni-icons>
				</view>
			</template>
			<template v-else>
				<view class="title flex-between" @click="Jump(`/pages/mine/paymentWay/paymentWay?id=${selectedCardId}`)">
					<view class="flex-1 flex-between">
						<text>提現到</text>
						<text v-if="backinfo.cardtype == 1 || backinfo.cardtype == 2">{{ backinfo.bankname }} ({{ backinfo.idcard | bankNoStr }})</text>
						<text v-if="backinfo.cardtype == 3 || backinfo.cardtype == 4">
							{{ backinfo.cardtype == 3 ? '个人支付宝' : '企业支付宝' }} ({{ backinfo.idcard | bankNoStr }})
						</text>
					</view>
					<uni-icons type="forward"></uni-icons>
				</view>
			</template>
			<view class="from-item flex-between">
				<text class="units">¥</text>
				<input type="digit" @input="inputChange" v-model="amount" placeholder="请输入提现金额" placeholder-class="placeholder-class" />
				<text class="all" @click="amount = integer(myBalance, 2)">全部</text>
			</view>
			<view class="balance flex-between">
				<text>當前可提現：{{ myBalance | integer(2, true) }}</text>
			</view>
			<view class="fee">
				<text>手續費：{{ times(fee, 100) }}%</text>
			</view>

			<view class="tips_box">
				<view class="tips_title">注意:</view>
				<view class="tips_content">1.最少提現數量：{{ least }}；</view>
				<!-- <view class="tips_content">3.可提现日期：工作日 {{getConfig(507)}}。</view> -->
			</view>
		</m-block>
		<m-block class="footer" slot="footer" gap="25" radius="0">
			<m-button @click="pay" :disabled="btnDisabled">{{ btnText }}</m-button>
		</m-block>
		<m-pay :isShow="isShow" :isPay="true" title="提示" @handleConfirm="withdrawalApp" :showCancel="true" @handleCancel="isShow = false">
			<view class="pay-Box">
				<view class="flex flex-between">
					<text>類型</text>
					<text>
						<template v-if="backinfo.cardtype == 1">個人銀行卡</template>
						<template v-if="backinfo.cardtype == 2">對公銀行卡</template>
						<template v-if="backinfo.cardtype == 3">個人支付寶</template>
						<template v-if="backinfo.cardtype == 4">企業銀行卡</template>
					</text>
				</view>
				<view class="hint flex-between">
					<text>提現到</text>
					<text>{{ backinfo.bankname }}({{ backinfo.idcard | bankNoStr }})</text>
				</view>
				<view class="hint flex-between">
					<text>提現金額</text>
					<text>{{ amount }}</text>
				</view>
				<view class="hint flex-between">
					<text>手續費</text>
					<text>{{ times(amount, fee) }}</text>
				</view>
				<view class="hint flex-between">
					<text>實際到賬</text>
					<text>{{ minus(amount, times(amount, fee)) }}</text>
				</view>
			</view>
		</m-pay>
	</m-layout2>
</template>

<script>
import { WithdrawApply } from '@/api/Trade.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			isShow: false,
			amount: '',
			paypassword: '',
			coinid: '1' //默认余额
		};
	},
	watch: {},
	computed: {
		...mapState({
			coinConfig: (state) => state.general.coinConfig,
			userinfo: (state) => state.user.userinfo,
			address: (state) => state.address.newaddress,
			userbalance: (state) => state.user.userbalance,
			nowBankCard: (state) => state.user.nowBankCard,
			backSelf: (state) => state.user.backSelf,
			backPublic: (state) => state.user.backPublic,
			selectedCardId: (state) => state.user.selectedCardId,
			userBackList: (state) => state.user.userBackList
		}),
		// 个人账号
		alipayaccount1() {
			return this.userBackList.filter((item) => item.cardtype == 3)[0];
		},
		// 对公账号
		alipayaccount2() {
			return this.userBackList.filter((item) => item.cardtype == 4)[0];
		},
		backinfo() {
			if (this.selectedCardId == 1) return this.backSelf;
			if (this.selectedCardId == 2) return this.backPublic;
			if (this.selectedCardId == 3) return this.alipayaccount1;
			if (this.selectedCardId == 4) return this.alipayaccount2;
			return '';
		},
		nowCoin() {
			return this.coinConfig[this.coinid];
		},
		fee() {
			return this.nowCoin['feeout'];
		},
		least() {
			return this.nowCoin['minout'];
		},
		myBalance() {
			return this.userbalance[this.coinid]['balance'];
		},
		btnDisabled() {
			if (!this.backinfo.idcard) return true;
			if (!Number(this.amount)) return true;
			if (Number(this.amount) < Number(this.least)) return true;
			if (Number(this.amount) > Number(this.myBalance)) return true;
			return false;
		},
		btnText() {
			if (!this.backinfo.idcard) return '请先绑定银行卡';
			if (!Number(this.amount)) return '请输入提现金额';
			if (Number(this.amount) < Number(this.least)) return `提现金额不少于${Number(this.least)}`;
			if (Number(this.amount) > Number(this.myBalance)) return '余额不足';
			return '确定';
		}
	},
	onLoad({ cardtype }) {
		this.coinCode = cardtype;
	},
	methods: {
		inputChange(e) {
			if (!e.target.value) return;
			var that = this;
			e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
			this.$nextTick(() => {
				that.amount = e.target.value;
			});
		},
		//梭哈
		showHand() {
			this.amount = this.integer(this.divide(this.nowCoin.balance, this.plus(1, this.fee)), 2);
		},
		//
		pay() {
			this.isShow = true;
		},

		async withdrawalApp(pwd) {
			const { success, msg, data, code } = await WithdrawApply({
				paytype: 1,
				paypassword: pwd,
				amount: this.amount,
				coinid: this.coinid,
				bankcardid: this.backinfo.id
			});
			this.Toast(msg);
			if (success) {
				this.amount = '';
				this.isShow = false;
				setTimeout(() => {
					this.Jump('/pages/wallet/payouts/recode/recode');
				}, 500);
			}
		}
	}
};
</script>

<style lang="scss">
.withdraw_box {
	background: url('@/static/images/pages/wallet/withdrawBg.png') no-repeat;
	background-size: 100% 500rpx;

	::v-deep .topbar {
		color: #fff;
	}
}

.block {
	padding: 30rpx;
	border-radius: 27rpx;
	background: #fff;

	.title {
		padding-bottom: 50rpx;
		font-size: 26rpx;
		font-family: PingFang TC;
		font-weight: 500;
		color: #000000;
	}

	.from-item {
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #eeeeee;

		.units {
			margin-bottom: -5rpx;
			font-size: 46rpx;
			font-family: PingFang TC;
			font-weight: 500;
			color: #333333;
		}

		.placeholder-class {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			margin-top: 15rpx;
		}

		input {
			flex: 1;
			margin-left: 20rpx;

			font-size: 50rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}

		.all {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: var(--theme);
		}
	}

	.balance {
		padding: 30rpx 0;

		text:nth-of-type(1) {
			font-size: 26rpx;
			font-family: PingFang TC;
			font-weight: 400;
			color: var(--theme);
		}

		text:nth-of-type(2) {
			font-size: 24rpx;
			font-family: PingFang TC;
			font-weight: 400;
			color: var(--theme);
		}
	}

	.fee {
		font-size: 26rpx;
		font-family: PingFang TC;
		font-weight: 400;
		color: #333333;
	}

	.tips_box {
		background: #f7fcff;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		padding: 0 30rpx 78rpx 30rpx;
		margin-top: 113rpx;

		.tips_title {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			padding: 36rpx 0 26rpx 0;
		}

		.tips_content {
			padding-bottom: 30rpx;
		}
	}
}

.hint {
	text-align: center;
	font-family: PingFang TC;
	font-weight: 400;
	color: #999;
}

.pay-Box {
	padding: 0 36rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;

	text:nth-of-type(1) {
		color: #999999;
	}

	text:nth-of-type(2) {
		color: #333333;
	}

	view + view {
		padding-top: 20rpx;
	}
}

.btn-box {
	padding: 30rpx 24rpx;
}
</style>
